<template>
    <div>
        <div class="topBtn">
            <div class="sizeBig"><span>过站扫描</span></div>
            <div class="liucheng">
                <span>产品过站流程：</span>
                <el-steps :active="1" align-center>
                    <el-step title="生产开工"></el-step>
                    <el-step title="打印输出"></el-step>
                    <el-step title="输出分拣"></el-step>
                    <el-step title="产品分拣"></el-step>
                    <el-step title="包装发货"></el-step>
                </el-steps>
            </div>
        </div>
        <div class="message">

            <p class="character">管理员使用“工位管理”设置好产线的工位资料，用户打开该界面系统会自动带出电脑在工艺路线中的哪道工序，无需人工选择，也避免了人为跳站漏洞。<span class="skip">查看帮助文档</span></p>
        </div>

        <div class="main">
            <div class="main_left">
                <div class="operation">
                    <h4>操作区</h4>
                    <ul>
                        <li>
                            <span>上一道工序:</span>
                            <el-button class="dayin" style="background-color:#eee;">
                                <span style="color:#000;">{{ProductData.PreTechName}}</span>
                                <!-- <span style="color:#000;"></span> -->
                            </el-button>
                        </li>
                        <li>
                            <span>扫描SN条码:</span>
                            <el-input class="saomiao" v-model="saomiao" placeholder="请扫描SN条码" style="width:60%" @keydown.native.enter="getProduct" clearable></el-input>
                        </li>
                        <li>
                            <span>下一道工序:</span>
                            <el-button class="dayin" type="primary">
                                <span>{{ProductData.NextTechName}}</span>
                            </el-button>
                        </li>
                    </ul>
                </div>
                <div class="workstation">
                    <div>
                        <h4>工位信息展示</h4>
                        <el-select v-model="lineId" placeholder="请选择线体" @change="getStation" clearable>
                            <el-option
                                v-for="(item,index) in options"
                                :key="index"
                                :label="item.LineId + '  ' + item.Name"
                                :value="item.LineId">
                            </el-option>
                        </el-select>
                    </div>
                     <ul>
                         <li>
                             <h5>工位名称：</h5>
                             <span>{{workStationData.Name}}</span>
                         </li>
                         <li>
                             <h5> 排程号：</h5>
                             <span>{{workStationData.name}}</span>
                         </li>
                         <li>
                             <h5>过站数量：</h5>
                             <span>{{workStationData.StationNumber}}</span>
                         </li>
                         <li>
                             <h5>工位线体：</h5>
                             <span>{{workStationData.LineName}}</span>
                         </li>
                         <li>
                             <h5>产品规格：</h5>
                             <span>{{productData.Decribe}}</span>
                         </li>
                         <li>
                             <h5>待生产数：</h5>
                             <span>{{workStationData.Ndfsghame}}</span>
                         </li>
                         <li>
                             <h5>所属车间：</h5>
                             <span>{{workStationData.WorkShopName}}</span>
                         </li>
                         <li>
                             <h5>产品名称：</h5>
                             <span>{{productData.Name}}</span>
                         </li>
                         <li>
                             <h5>操作员：</h5>
                             <span>{{workStationData.LastModifyBy}}</span>
                         </li>
                     </ul>
                </div>
                <div class="product">
                    <h4>产品照片展示</h4>
                    <ul>
                        <li v-for="(item,index) in OrderFiles" :key="index"><img :src="item.FullPath"></li>
                    </ul>
                </div>
            </div>
            <div class="main_right">
                <h4>ESOP-标准作业指导书</h4>
                <ul>
                    <li v-for="(item,index) in photoData" :key="index">
                        <span>图{{item.TechGuideId}}</span>
                        <div>
                            <img :src="item.PngFullPath" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 过站扫描弹出框 -->
        <el-dialog
        class="dialog"
        :visible.sync="dialogVisible"
        width="400px">
            <span>扫描过站结果：</span>
            <!-- <el-input v-model="input" placeholder="请扫描PASS/FAIL"></el-input> -->
            <el-radio-group v-model="radio">
                <el-radio :label="true">通过</el-radio>
                <el-radio :label="false">不通过</el-radio>
            </el-radio-group>
            <el-button @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-dialog>

    </div>
</template>

<script>
import {
getWorkStationInfo, //工位信息
getScanProductInfo, //订单产品信息
commitTechOrderProduct, //提交
getTechByTechId, // 工序指导
} from '@/api/scan'
import {getUserLineList} from '@/api/linebody'
// import Table from './components/scanTable';
export default {
    name: 'scan',
    components:{

    },
    data(){
        return{
            radio:true,
            options:[],
            lineId:'',
            saomiao:'',
            input:'',
            workStationData:{},//工位信息数据
            productData:[], //产品信息数据
            ProductData:[],
            OrderFiles:[], //照片数据
            photoData:[], //工序指导
            dialogVisible: false, // 过站扫描弹出框
        }
    },
    mounted() {
        this.init();
        this.getLine();
    },
    methods:{
        init(){},
        getStation(val){
            //获取本机电脑IP地址
            var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection
            || window.mozRTCPeerConnection;
            if(RTCPeerConnection)(()=>{
                var rtc = new RTCPeerConnection()
                rtc.createDataChannel('');//创建一个可以发送任意数据的数据通道
                rtc.createOffer(offerDesc => {  //创建并存储一条sdp数据
                    rtc.setLocalDescription(offerDesc)
                }, e=>{ })
                rtc.onicecandidate =(evt) => {   //监听candidate事件
                // console.log(evt)
                    if(evt.candidate&&evt.candidate.foundation == 25531464){
                        var ip_addr = evt.candidate.address
                        console.log(this.ip_addr)
                        localStorage.setItem('ip_addr',ip_addr)
                    }
                }
            })()
            console.log(localStorage.getItem('ip_addr'))
            var ipaddress = localStorage.getItem('ip_addr')
            //通过电脑IP地址获取当前工位信息
            getWorkStationInfo({ipAddress:ipaddress,techType:0,lineId:parseInt(this.lineId)}).then(res => {
                if(parseInt(res.Code) === 1){
                    this.workStationData = res.Result
                    getTechByTechId({techId:parseInt(this.workStationData.TechId)}).then(res => {
                        if(parseInt(res.Code) === 1){
                            this.photoData = res.Result.TechGuides
                        }
                    }).catch(res=>{})
                }
            }).catch(res=>{})
        },
        // 通过扫描条码带出产品信息
        getProduct(){
            // console.log(this.workStationData.TechId)
            if(this.lineId == ''){
                this.$message('请选择线体')
                this.saomiao = ''
            }else{
                getScanProductInfo({productCode:this.saomiao,techId:parseInt(this.workStationData.TechId)}).then(res => {
                    if(parseInt(res.Code) === 1) {
                        this.productData = res.Result.Product
                        this.ProductData = res.Result
                        this.OrderFiles = res.Result.OrderFiles
                        if(this.workStationData.IsQcTech === 1){
                            this.dialogVisible = true
                        }else{
                            // 其他工序提交默认为true
                            commitTechOrderProduct({techId:parseInt(this.workStationData.TechId),productCode:this.saomiao,isPass:true}).then(res => {
                                if(parseInt(res.Code) === 1){
                                    this.$message({
                                        type:'success',
                                        message:'提交成功'
                                    })
                                }
                            })
                        }
                    }
                }).catch(res => {
                    this.saomiao = ''
                })
            }

        },
        //获取线体
        getLine(){
            getUserLineList({keyName:'',lineType:-1}).then(res => {
                if(parseInt(res.Code) === 1) {
                    this.options = res.Result
                }
            })
        },
        //质检工序过站扫描提交
        submit(){
            commitTechOrderProduct({techId:parseInt(this.workStationData.TechId),productCode:this.saomiao,isPass:this.radio}).then(res => {
                if(parseInt(res.Code) === 1){
                    this.$message({
                        type:'success',
                        message:'提交成功'
                    })
                    this.dialogVisible = false
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">

.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    .sizeBig{
        font-size: 16px;
        float: left;
    }
    .liucheng{
        float: right;
        span{
            font-size: 14px;
            float: left;
            line-height: 60px;
        }
        .el-steps{
            float: right;
            width: 500px;
            line-height: 24px;
            margin-top: 5px;
        }
    }
}
.message{
    width:98%;
    margin: 0 auto;
    height:60px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer;
        }
    }
}
.main{
    width: 98%;
    height: 850px;
    margin: 0 auto;
    margin-top: 20px;

    .main_left{
        float: left;
        width: 55%;
        height: 100%;
        .operation{
            height: 104px;
            border: 1px solid #eee;
            h4{
                font-size: 14px;
                font-weight: 600;
                padding: 17px 0 0 22px;
                // margin: 17px 0 0 22px;
            }
            ul{
                display: flex;
                width: 100%;
                height: 30px;
                line-height: 35px;
                li:first-child{
                    flex: 1.5;
                }
                li:nth-of-type(2){
                    flex: 2;
                }
                li:last-child{
                    flex: 1.5;
                }
                li{
                    float: left;
                    height: 100%;
                    line-height: 35px;
                    // text-align: center;
                    margin: 15px 0 0 20px;
                    span{
                        font-size: 14px;
                    }
                    // .saomiao{
                    //     width:
                    // }
                    .dayin{
                        width:80px;
                        height:35px;
                        border: none;
                        span{
                            display: inline-block;
                            width: 100%;
                            margin-left: -25px;
                            color: #fff;

                        }
                    }
                }
            }
        }
        .workstation{
            margin-top: 20px;
            width: 100%;
            height: 182px;
            border: 1px solid #eee;
            div{

                h4{
                    float: left;
                    font-size: 14px;
                    font-weight: 600;
                    padding: 17px 0 0 22px;
                }
                .el-select{
                    // float: left;
                    margin-left: 20px;
                    margin-top: 10px;
                    width: 150px;
                }
            }
            ul{
                margin-top: 20px;
                width: 98%;
                margin: 0 auto;
                background-color: #eee;
                li{
                    float: left;
                    width: 28%;
                    margin-left:20px;
                    margin-top: 20px;

                    h5{
                        float: left;
                        font-size: 14px;
                        font-weight: 400;
                        color: #666;
                        width: 70px;
                        text-align-last: justify;
                    }
                    span{
                        float: left;
                        font-size: 14px;
                        font-weight: 400;
                        color: #333;
                    }
                }
            }
        }
        .product{
            margin-top: 20px;
            height: 483px;
            border: 1px solid #eee;
            h4{
                font-size: 14px;
                font-weight: 600;
                padding: 17px 0 0 22px;
            }
            ul{
                width: 100%;
                overflow-x:hidden;
                height: 432px;
                margin-top: 17px;
                // margin: 17px 20px 0 15px;
                li{
                    float: left;
                    width: 21%;
                    height: 120px;
                    margin-left: 20px;
                    margin-bottom: 20px;
                    // border: 1px solid #ccc;
                    img{
                        width: 100%;
                        height: 100%;
                        float: left;
                    }
                }
            }
        }
    }
    .main_right{
        float: right;
        width: 43.5%;
        height: 810px;
        border: 1px solid #eee;
        // overflow: hidden;
        h4{
            font-size: 14px;
            font-weight: 600;
            padding: 17px 0 0 22px;
            height: 53px;
        }
        ul{
            width: 100%;
            height:750px;
           overflow-x:hidden;
            li{
                width: 100%;
                height: 400px;
                margin-bottom: 20px;
                overflow: hidden;
                span{
                    float: left;
                    margin-left: 40px;
                    font-size: 14px;
                }
                div{
                    float: left;
                    margin-left: 21px;
                    width: 80%;
                    height: 100%;
                    // border: 1px solid #ccc;
                   img{
                       width: 100%;
                       height: 100%;
                       float: left;
                   }
                }
            }
        }
    }
}
.dialog{
    margin-top: 300px;
    margin-bottom: 20px;
    span{
        float: left;
        margin-left: 20px;
        margin-top: -23px;
        font-size: 16px;
        font-weight: 600;
    }
    .el-radio-group{
        float: left;
        width: 200px;
        margin-top: -22px;
        margin-left: 140px;
    }
    .el-button{
        margin-top: 20px;
        margin-left: 60px;
    }
}
</style>
